<template>
	<view>
		<view v-if="isload">
			<view class="buydialog-mask" @tap="buydialogChange"></view>
			<view class="buydialog" :class="menuindex>-1?'tabbarbot':'notabbarbot'">
				<view class="close" @tap="buydialogChange">
					<image src="/static/img/close.png" class="image" />
				</view>
				<view class="title">
					<image :src="nowguige.pic || product.pic" class="img" @tap="previewImage"
						:data-url="nowguige.pic || product.pic" />
					<view class="price" :style="{color:t('color1')}"
						v-if="product.price_type != 1 || nowguige.sell_price > 0">{{nowguige.sell_price}}
						<text v-if="nowguige.market_price > nowguige.sell_price"
							class="t2">{{nowguige.market_price}}</text>
					</view>
					<text class="choosename" v-if="product.limit_start > 1">
						{{product.limit_start}}{{lang('the carry out since a')}}</text>
					<view class="stock">{{lang('inventory')}}：{{nowguige.stock}}</view>
					<view class="choosename" v-if="product.limit_start<=1">{{lang('the selected specifications')}}:
						{{nowguige.name}}
					</view>
				</view>
				<view v-if="nowguige.balance_price" style="width:94%;margin:10rpx 3%;font-size:24rpx;"
					:style="{color:t('color1')}">
					{{lang('down payment amount')}}：{{nowguige.advance_price}}{{lang('yuan')}}，{{lang('balance payment amount')}}：{{nowguige.balance_price}}lang('yuan')
				</view>
				<view style="max-height:50vh;overflow:scroll">
					<view v-for="(item, index) in guigedata" :key="index" class="guigelist flex-col">
						<view class="name">{{item.title}}</view>
						<view class="item flex flex-y-center">
							<block v-for="(item2, index2) in item.items" :key="index2">
								<view :data-itemk="item.k" :data-idx="item2.k"
									:class="'item2 ' + (ggselected[item.k]==item2.k ? 'on':'')" @tap="ggchange">
									{{item2.title}}
								</view>
							</block>
						</view>
					</view>
				</view>
				<block v-if="product.price_type == 1">
					<button class="addcart" :style="{backgroundColor:t('color2')}" @tap="showLinkChange">联系TA</button>
				</block>
				<block v-else>
					<view class="buynum flex flex-y-center">
						<view class="flex1">{{lang('purchase quantity')}}：</view>
						<view class="addnum">
							<view class="minus" @tap="gwcminus">
								<image class="img" src="/static/img/cart-minus.png" />
							</view>
							<input class="input" type="number" :value="gwcnum" @input="gwcinput"></input>
							<view class="plus" @tap="gwcplus">
								<image class="img" src="/static/img/cart-plus.png" />
							</view>
						</view>
					</view>
					<view class="tips-text" :style="{color:t('color1')}"
						v-if="shopset && shopset.showcommission==1 && nowguige.commission > 0">
						{{lang('friends share purchase is expected')}}{{t('佣金')}}：<text
							style="font-weight:bold;padding:0 2px">{{nowguige.commission}}</text>{{nowguige.commission_desc}}
					</view>
					<view class="op">
						<block v-if="nowguige.stock <= 0">
							<button class="nostock">{{lang('insufficient inventory')}}</button>
						</block>
						<block v-else>
							<button class="addcart" :style="{backgroundColor:t('color2')}" @tap="addcart"
								v-if="btntype==0 && canaddcart">{{lang('add to cart')}}</button>
							<button class="tobuy" :style="{backgroundColor:t('color1')}" @tap="tobuy"
								v-if="btntype==0">{{lang('buy now')}}</button>
							<button class="addcart" :style="{backgroundColor:t('color2')}" @tap="addcart"
								v-if="btntype==1">{{lang('confirm')}}</button>
							<button class="tobuy" :style="{backgroundColor:t('color1')}" @tap="tobuy"
								v-if="btntype==2">{{lang('confirm')}}</button>
						</block>
					</view>
				</block>
			</view>
		</view>
		<loading v-if="loading"></loading>
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				ks: '',
				product: {},
				guigelist: {},
				guigedata: {},
				ggselected: {},
				nowguige: {},
				gwcnum: 1,
				isload: false,
				loading: false,
				canaddcart: true,
				shopset: {}
			}
		},
		props: {
			btntype: {
				default: 0
			},
			menuindex: {
				default: -1
			},
			controller: {
				default: 'ApiShop'
			},
			needaddcart: {
				default: true
			},
			proid: {}
		},
		mounted: function() {
			this.getdata();
		},
		methods: {
			lang: function(k) {
				return app.lang(k);
			},
			getdata: function() {
				var that = this;
				if (this.controller == 'ApiShop' && app.globalData.isdouyin == 1) {
					app.showLoading(that.lang('in the load'));
					app.post('ApiShop/getDouyinProductId', {
						proid: that.proid
					}, function(res) {
						app.showLoading(false);
						if (res.status == 1) {
							tt.openEcGood({
								promotionId: res.douyin_product_id
							});
						} else {
							app.alert(res.msg)
						}
					});
					return;
				}

				that.loading = true;
				app.post(this.controller + '/getproductdetail', {
					id: that.proid
				}, function(res) {
					that.loading = false;
					that.product = res.product;
					that.shopset = res.shopset;
					if (!that.product.limit_start) {
						that.product.limit_start = 1;
					}
					that.guigelist = res.guigelist;
					that.guigedata = res.guigedata;
					var guigedata = res.guigedata;
					var ggselected = [];
					for (var i = 0; i < guigedata.length; i++) {
						ggselected.push(0);
					}
					that.ks = ggselected.join(',');
					that.nowguige = that.guigelist[that.ks];
					that.ggselected = ggselected;
					if (that.nowguige.limit_start > 0)
						that.gwcnum = that.nowguige.limit_start;
					else
						that.gwcnum = that.product.limit_start;
					that.isload = true;
					if (that.product.freighttype == 3 || that.product.freighttype == 4) { //虚拟商品不能加入购物车
						that.canaddcart = false;
					}
				});
			},
			buydialogChange: function() {
				this.$emit('buydialogChange');
			},
			showLinkChange: function() {
				this.$emit('showLinkChange');
			},
			//选择规格
			ggchange: function(e) {
				var idx = e.currentTarget.dataset.idx;
				var itemk = e.currentTarget.dataset.itemk;
				var ggselected = this.ggselected;
				ggselected[itemk] = idx;
				var ks = ggselected.join(',');
				this.ggselected = ggselected;
				this.ks = ks;
				this.nowguige = this.guigelist[this.ks];
				if (this.nowguige.limit_start > 0) {
					if (this.gwcnum < this.nowguige.limit_start) {
						this.gwcnum = this.nowguige.limit_start;
					}
				}
			},
			tobuy: function(e) {
				var that = this;
				var ks = that.ks;
				var proid = that.product.id;
				var ggid = that.guigelist[ks].id;
				var stock = that.guigelist[ks].stock;
				var num = that.gwcnum;
				if (num < 1) num = 1;
				if (stock < num) {
					app.error(that.lang('insufficient inventory'));
					return;
				}
				var prodata = proid + ',' + ggid + ',' + num;
				this.$emit('buydialogChange');
				if (this.controller == 'ApiShop') {
					app.goto('/myshop/shop/buy?prodata=' + prodata);
				} else if (this.controller == 'ApiSeckill') {
					app.goto('/activity/seckill/buy?prodata=' + prodata);
				} else if (this.controller == 'ApiSeckill2') {
					app.goto('/activity/seckill2/buy?prodata=' + prodata);
				} else if (this.controller == 'ApiRestaurantTakeaway') {
					app.goto('/restaurant/takeaway/buy?prodata=' + prodata);
				} else if (this.controller == 'ApiRestaurantShop') {
					app.goto('/restaurant/shop/buy?prodata=' + prodata);
				}
			},
			//加入购物车操作
			addcart: function() {
				var that = this;
				var ks = that.ks;
				var num = that.gwcnum;
				var proid = that.product.id;
				var ggid = that.guigelist[ks].id;
				var stock = that.guigelist[ks].stock;
				if (num < 1) num = 1;
				if (stock < num) {
					app.error(that.lang('insufficient inventory'));
					return;
				}
				if (this.needaddcart) {
					app.post(this.controller + '/addcart', {
						proid: proid,
						ggid: ggid,
						num: num
					}, function(res) {
						if (res.status == 1) {
							app.success(that.lang('adding succeeded'));
						} else {
							app.error(res.msg);
						}
					});
				}
				this.$emit('addcart', {
					proid: proid,
					ggid: ggid,
					num: num
				});
				this.$emit('buydialogChange');
			},
			//加
			gwcplus: function(e) {
				var gwcnum = this.gwcnum + 1;
				var ks = this.ks;
				if (gwcnum > this.guigelist[ks].stock) {
					app.error(that.lang('insufficient inventory'));
					return 1;
				}
				if (this.product.perlimitdan > 0 && gwcnum > this.product.perlimitdan) {
					app.error(this.lang('every single purchase') + this.product.perlimitdan + this.lang('a'));
					return 1;
				}
				this.gwcnum = this.gwcnum + 1;
			},
			//减
			gwcminus: function(e) {
				var gwcnum = this.gwcnum - 1;
				var ks = this.ks;
				if (this.nowguige.limit_start > 0) {
					if (gwcnum <= this.nowguige.limit_start - 1) {
						if (this.nowguige.limit_start > 1) {
							app.error(this.lang('the specification') + this.nowguige.limit_start + this.lang(
								'the carry out since a'));
						}
						return;
					}
				} else {
					if (gwcnum <= this.product.limit_start - 1) {
						if (this.product.limit_start > 1) {
							app.error(this.lang('the goods from the') + this.product.limit_start + this.lang(
								'the carry out since a'));
						}
						return;
					}
				}

				this.gwcnum = this.gwcnum - 1;
			},
			//输入
			gwcinput: function(e) {
				var ks = this.ks;
				var gwcnum = parseInt(e.detail.value);
				if (gwcnum < 1) return 1;
				if (gwcnum > this.guigelist[ks].stock) {
					return this.guigelist[ks].stock > 0 ? this.guigelist[ks].stock : 1;
				}
				if (this.nowguige.limit_start > 0) {
					if (gwcnum <= this.nowguige.limit_start - 1) {
						if (this.nowguige.limit_start > 1) {
							app.error(this.lang('the specification') + this.nowguige.limit_start + this.lang(
								'the carry out since a'));
						}
						gwcnum = this.nowguige.limit_start;
					}
				} else {
					if (gwcnum <= this.product.limit_start - 1) {
						if (this.product.limit_start > 1) {
							app.error(this.lang('the goods from the') + this.product.limit_start + this.lang(
								'the carry out since a'));
						}
						gwcnum = this.product.limit_start;
					}

				}
				if (this.product.perlimitdan > 0 && gwcnum > this.product.perlimitdan) {
					app.error(this.lang('every single purchase') + this.product.perlimitdan + this.lang('a'));
					gwcnum = this.product.perlimitdan;
				}

				this.gwcnum = gwcnum;
			},
		}
	}
</script>
<style>
	.buydialog-mask {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		bottom: 0px;
		z-index: 10
	}

	.buydialog {
		position: fixed;
		width: 100%;
		left: 0px;
		bottom: 0px;
		background: #fff;
		z-index: 11;
		border-radius: 20rpx 20rpx 0px 0px
	}

	.buydialog .close {
		position: absolute;
		top: 0;
		right: 0;
		padding: 20rpx;
		z-index: 12
	}

	.buydialog .close .image {
		width: 30rpx;
		height: 30rpx;
	}

	.buydialog .title {
		width: 94%;
		position: relative;
		margin: 0 3%;
		padding: 30rpx 0px 20rpx 0;
		border-bottom: 0;
		height: 190rpx;
	}

	.buydialog .title .img {
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		top: 20rpx;
		border-radius: 10rpx;
		border: 0 #e5e5e5 solid;
		background-color: #fff
	}

	.buydialog .title .price {
		padding-left: 180rpx;
		width: 100%;
		font-size: 36rpx;
		height: 70rpx;
		color: #FC4343;
		overflow: hidden;
	}

	.buydialog .title .price .t1 {
		font-size: 26rpx
	}

	.buydialog .title .price .t2 {
		font-size: 26rpx;
		text-decoration: line-through;
		color: #aaa;
		margin-left: 6rpx;
	}

	.buydialog .title .choosename {
		padding-left: 180rpx;
		width: 100%;
		font-size: 24rpx;
		height: 42rpx;
		line-height: 42rpx;
		color: #888888
	}

	.buydialog .title .stock {
		padding-left: 180rpx;
		width: 100%;
		font-size: 24rpx;
		height: 42rpx;
		line-height: 42rpx;
		color: #888888
	}

	.buydialog .guigelist {
		width: 94%;
		position: relative;
		margin: 0 3%;
		padding: 0px 0px 10px 0px;
		border-bottom: 0;
	}

	.buydialog .guigelist .name {
		height: 70rpx;
		line-height: 70rpx;
	}

	.buydialog .guigelist .item {
		font-size: 30rpx;
		color: #333;
		flex-wrap: wrap
	}

	.buydialog .guigelist .item2 {
		height: 60rpx;
		line-height: 60rpx;
		margin-bottom: 4px;
		border: 0;
		border-radius: 4rpx;
		padding: 0 40rpx;
		color: #666666;
		margin-right: 10rpx;
		font-size: 26rpx;
		background: #F4F4F4
	}

	.buydialog .guigelist .on {
		color: #FC4343;
		background: rgba(252, 67, 67, 0.1);
		font-weight: bold
	}

	.buydialog .buynum {
		width: 94%;
		position: relative;
		margin: 0 3%;
		padding: 10px 0px 10px 0px;
	}

	.buydialog .addnum {
		font-size: 30rpx;
		color: #666;
		width: auto;
		display: flex;
		align-items: center
	}

	.buydialog .addnum .plus {
		width: 48rpx;
		height: 36rpx;
		background: #F6F8F7;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.buydialog .addnum .minus {
		width: 48rpx;
		height: 36rpx;
		background: #F6F8F7;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.buydialog .addnum .img {
		width: 24rpx;
		height: 24rpx
	}

	.buydialog .addnum .input {
		flex: 1;
		width: 70rpx;
		border: 0;
		text-align: center;
		color: #2B2B2B;
		font-size: 24rpx
	}

	.buydialog .tips-text {
		display: inline-block;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 20rpx
	}

	.buydialog .op {
		width: 90%;
		margin: 20rpx 5%;
		border-radius: 36rpx;
		overflow: hidden;
		display: flex;
		margin-top: 60rpx;
	}

	.buydialog .addcart {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		color: #fff;
		border-radius: 0px;
		border: none;
		font-size: 28rpx;
		font-weight: bold
	}

	.buydialog .tobuy {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		color: #fff;
		border-radius: 0px;
		border: none;
		font-size: 28rpx;
		font-weight: bold
	}

	.buydialog .nostock {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		background: #aaa;
		color: #fff;
		border-radius: 0px;
		border: none;
	}
</style>
